<template>
    <div class="color-fff">
        <div class="pb-20 container" id="live-container" ref="box" v-show="!empty">
            <el-row :gutter="16">
                <el-col :class="{'mt-13':index>5}" :key="index" :span="4" v-for="(item,index) in data">
                    <div @click="toDetail(item)">
                        <div class="position-relative">
                            <el-image :src="item.thumbnail" fit="cover" style="width: 100%; height: 8vw;border-top-left-radius:10px;border-top-right-radius:10px"></el-image>
                            <div class="color-fff font-13" style="position:absolute;bottom:10px;left:10px;">
                                <i class="el-icon el-icon-user font-14"></i>
                                <span>{{item.online_user}}</span>
                            </div>
                            <div style="position: absolute;top:calc(50% - 15px);left:calc(50% - 15px);" v-if="item.status==1">
                                <el-image :src="require('@/assets/gif/live_small.gif')" fit="cover" style="width: 30px; height: 30px;"></el-image>
                            </div>
                        </div>
                        <div class="pd-10 bg-action color-fff" style="margin-top:-5px;;border-bottom-left-radius:10px;border-bottom-right-radius:10px" v-if="item.author">
                            <div class="font-15">{{item.author.name}}的直播间</div>
                            <div class="mt-6 flex align-center cursor-pointer">
                                <el-avatar :size="20" :src="item.author.avatar"></el-avatar>
                                <span class="pl-6 font-13">{{item.author.name}}</span>
                            </div>
                        </div>
                        <div class="pd-4 pl-12 pr-12 radius-18 flex align-center font-13" style="position: absolute;top:8px;left:14px;background:rgb(6 3 22 / 60%)" v-if="item.price>0">
                            <div class="color-fff">付费直播间</div>
                            <div class="color-yellow-light ml-3">{{item.price}}{{$store.state.config.coin_name}}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div v-if="data.length > 0" style="margin-top: 30px;text-align: center;color: #83818B;">
            -没有更多内容了-
        </div>
            <div class="text-center color-fff font-15 width-100% height-30">
                <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px;height:30px;" v-show="loading"></el-image>
            </div>
        </div>
        <div class="flex jus-center flex-dre-column align-center" style="margin-top:15vh" v-show="empty">
            <el-image :src="require('@/assets/image/empty-black.png')" fit="cover" style="width: 15vw;height:15vw;"></el-image>
            <div class="mt-10 color-fff font-14">没找到相关内容</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        keyword: String,
    },
    data() {
        return {
            query: {
                offset: 0,
                limit: 30,
            },
            empty: true,
            data: [],
            loading: false,
        }
    },
    mounted() {
        this.query.keyword = this.keyword
        this.getList(true)
        let box = document.getElementById('live-container')
        box.addEventListener('scroll', this.scrollInfo)
    },
    methods: {
        toDetail(item) {},
        reset(keyword) {
            this.query.offset = 0
            this.data = []
            this.empty = true
            this.query.keyword = keyword
            this.$nextTick(() => {
                this.getList(true)
            })
        },
        getList(is_init = false) {
            return new Promise(async (resolve, reject) => {
                this.loading = true
                this.$request.get('/live/pc_index', this.query).then((res) => {
                    if (is_init && res.result.length == 0) {
                        this.empty = true
                        return true
                    } else {
                        this.empty = false
                    }
                    this.data = this.data.concat(res.result)
                    this.loading = false

                    resolve(res)
                })
            })
        },
        scrollInfo() {
            let e = document.getElementById('live-container')
            if (e.scrollTop + e.clientHeight >= e.scrollHeight - 50) {
                this.scroll()
            }
        },
        scroll() {
            if (this.loading == true) {
                return false
            }
            this.query.offset = this.data.length
            this.getList().then(() => {})
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    height: calc(100vh - 4rem - 69px);
    overflow-y: scroll;
}
.container::-webkit-scrollbar {
    display: none;
}
</style>